@import "../utils/color";

.for_you {
  font-size: 32px;
  position: absolute;
  top: 50px;
  left: 700px;
}

.keyboard {
  position: absolute;
  left: 100px;
  width: 390px;
  background-color: transparent;

  &-search {
    width: 385px;
    height: 48px;
    border-bottom: 2px solid rgba(#fff, 0.5);

    &-magnifier {
      float: left;
      width: 32px;
      height: 32px;
    }

    &-input {
      font-size: 32px;
      float: left;
      overflow: hidden;
      width: 350px;
      padding-left: 16px;
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &-control {
    position: absolute;
    top: 64px;
    width: 385px;
    background-color: transparent;

    &-item {
      font-size: 32px;
      line-height: 50px;
      float: left;
      width: 125px;
      height: 60px;
      text-align: center;
      border: 5px solid transparent;
      background-color: rgba(#fff, 0.1);

      &.fe-focus {
        font-weight: bold;
        color: $primary;
        border-color: $primary;
      }
    }

    &-empty {
      margin-right: 135px;
    }
  }

  &-panel {
    position: absolute;
    top: 144px;
    width: 390px;

    &-item {
      font-size: 32px;
      line-height: 50px;
      float: left;
      width: 60px;
      height: 60px;
      margin-right: 5px;
      margin-bottom: 5px;
      text-align: center;
      border: 5px solid transparent;
      border-radius: 1px;
      background-color: rgba(#fff, 0.1);

      &.fe-focus {
        font-weight: bold;
        transform: scale(1.5);
        color: $primary;
        border-color: $primary;
      }
    }
  }
}
